<template>
  <div id="app">
    <div style="height: 500px;">
    <virtual-scroll-table
      :data="bigData"
      :height="500"
      row-key="id"
      @row-click="handleRowClick"
    >
      <template #header>
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄" width="80"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </template>
    </virtual-scroll-table>
  </div>
  </div>
</template>

<script>
import VirtualScrollTable from './components/table.vue'

export default {
  components: { VirtualScrollTable },
  data() {
    return {
      bigData: Array.from({ length: 10000 }, (_, i) => ({
        id: i + 1,
        name: `用户${i + 1}`,
        age: Math.floor(Math.random() * 50) + 18,
        address: `北京市朝阳区第${i + 1}号大街`
      }))
    }
  },
  methods: {
    handleRowClick(row) {
      console.log('点击行:', row)
    }
  }
}
</script>
<style>
body,html{
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}
#app{
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}
</style>